<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px" >
        <div class="admin_left">
          <el-image src="logo.png"></el-image>
          <div class="admin_menu">
            <el-row>
              <el-col :span="100">
                <el-menu
                  default-active="managecar"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                  :router="true"
                >
                  <!-- <el-menu-item index="1" 
                 >
                    <i class="el-icon-menu"></i>
                    <span slot="title">首页</span>
                  </el-menu-item> -->

                  <el-menu-item index="/managecar">
                    <i class="el-icon-menu"></i>
                    <span slot="title">车辆管理</span>
                  </el-menu-item>
                  
                  <el-menu-item index="/manageorder">
                    <i class="el-icon-document"></i>
                    <span slot="title">订单管理</span>
                  </el-menu-item>
                  <el-menu-item index="/manageuser">
                    <i class="el-icon-setting"></i>
                    <span slot="title">用户管理</span>
                  </el-menu-item>
                  <el-menu-item disabled index="/managebackcar">
                    <i class="el-icon-setting"></i>
                    <span slot="title">退租处理</span>
                  </el-menu-item>
                  <el-menu-item index="/addcar">
                    <i class="el-icon-setting"></i>
                    <span slot="title">新增车辆</span>
                  </el-menu-item>
                  <el-menu-item index="" disabled>
                    <i class="el-icon-setting"></i>
                    <span slot="title">权限设置</span>
                  </el-menu-item>

                  <!-- <el-submenu index="8">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="8-1">选项1</el-menu-item>
                      <el-menu-item index="8-2">选项2</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu> -->

                </el-menu>
              </el-col>
            </el-row>
          </div>
          <!-- 侧边导航栏 -->
        </div>
      </el-aside>
      <!-- 右边栏 -->
      <el-container>
        <!-- 头部 -->
        <el-header height="30px">
          <div class="admin_header">
            <span class="admin_header_left">SN租车科技股份有限公司</span>
            <el-dropdown>
              <span class="el-dropdown-link">
                欢迎{{Aname}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>首页</el-dropdown-item>
                <el-dropdown-item @click.native="UpdateName(null)">退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 中间导航栏 -->
        <el-main>
         <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
export default {
  methods: {
    ...mapMutations(['UpdateName']),
    selectNum(){
      
    },
    handleOpen(key, keyPath,index) {
      // console.log(key, keyPath,index);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
  computed: {
    ...mapState(['Aname'])
  },
};
</script>
<style src="../assets/css/home.css" scoped></style>
<style scoped>
.admin_left {
  height: 1000px;
  background-color: rgb(84, 92, 100);
}
/deep/.el-col {
  width: 100% !important;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
  margin-top: 20px;
}
</style>
<style lang="scss" scoped></style>
